<template>
  <div class="yemian">
    <div class="bigbox">
      <div class="title">用户注册</div>

      <!-- 姓名输入 -->
      <div class="content">
        <img :src="require('@/assets/name.png')" alt="姓名" class="imge">
        <input type="text" placeholder="请输入姓名" class="input" v-model="form.name" @blur="validateField('name')">
      </div>
      <p class="error-text" v-if="errors.name">{{ errors.name }}</p>

      <!-- 手机号输入 -->
      <div class="content">
        <img :src="require('@/assets/imag1.png')" alt="手机号" class="imge">
        <input type="tel" placeholder="请输入手机号" class="input" v-model="form.phone" @input="formatPhone"
          @blur="validateField('phone')">
      </div>
      <p class="error-text" v-if="errors.phone">{{ errors.phone }}</p>

      <!-- 密码输入 -->
      <div class="content">
        <img :src="require('@/assets/imag2.png')" alt="密码" class="imge">
        <input type="password" placeholder="请输入密码(至少6位)" class="input" v-model="form.pwd" @blur="validateField('pwd')">
      </div>
      <p class="error-text" v-if="errors.pwd">{{ errors.pwd }}</p>

      <!-- 确认密码输入 -->
      <div class="content">
        <img :src="require('@/assets/imag2.png')" alt="确认密码" class="imge">
        <input type="password" placeholder="请确认密码" class="input" v-model="form.confirmPwd"
          @blur="validateField('confirmPwd')">
      </div>
      <p class="error-text" v-if="errors.confirmPwd">{{ errors.confirmPwd }}</p>

      <!-- 注册按钮 -->
      <button class="login-btn" @click="handleRegister" :disabled="loading">
        <span v-if="!loading">注册</span>
        <span v-if="loading">注册中...</span>
      </button>

      <!-- 跳转登录 -->
      <div class="to-login">
        已有账号？<span @click="toLogin" class="link">去登录</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

// 路由实例
const router = useRouter();

// 表单数据
const form = ref({
  name: '', // 姓名（后端必填）
  phone: '', // 手机号（后端必填）
  pwd: '', // 密码（后端必填）
  confirmPwd: '' // 确认密码（前端验证用）
});

// 错误信息
const errors = ref({});

// 加载状态
const loading = ref(false);

// 格式化手机号（仅允许数字）
const formatPhone = () => {
  form.value.phone = form.value.phone.replace(/\D/g, ''); // 去除非数字字符
};

// 单个字段验证
const validateField = (field) => {
  const value = form.value[field];
  errors.value[field] = ''; // 清空当前字段错误

  switch (field) {
    case 'name':
      if (!value.trim()) errors.value[field] = '姓名不能为空';
      break;
    case 'phone':
      if (!value) {
        errors.value[field] = '手机号不能为空';
      } else if (value.length !== 11) {
        errors.value[field] = '手机号必须为11位数字';
      }
      break;
    case 'pwd':
      if (!value) {
        errors.value[field] = '密码不能为空';
      } else if (value.length < 6) {
        errors.value[field] = '密码长度不能少于6位';
      }
      break;
    case 'confirmPwd':
      if (!value) {
        errors.value[field] = '请确认密码';
      } else if (value !== form.value.pwd) {
        errors.value[field] = '两次密码输入不一致';
      }
      break;
  }
};

// 整体表单验证
const validateForm = () => {
  // 验证所有字段
  Object.keys(form.value).forEach(field => validateField(field));
  // 检查是否有错误
  return Object.values(errors.value).every(err => !err);
};

// 处理注册
const handleRegister = async () => {
  // 表单验证
  if (!validateForm()) return;

  // 准备提交数据（后端需要name、phone、pwd）
  const submitData = {
    name: form.value.name.trim(),
    phone: form.value.phone,
    pwd: form.value.pwd
  };

  try {
    loading.value = true; // 开启加载状态
    // 调用后端注册接口
    const res = await axios.post('http://127.0.0.1:9001/api/users', submitData);
    console.log(res.data);

    // 注册成功
    alert('注册成功！即将跳转到登录页');
    router.push('/Login'); // 跳转到登录页
  } catch (err) {
    // 错误处理
    let errorMsg = '注册失败，请重试';
    if (err.response) {
      // 后端返回的错误
      if (err.response.data.error) {
        errorMsg = err.response.data.error;
        // 特殊场景：手机号已存在（假设后端因唯一索引报错）
        if (errorMsg.includes('Duplicate entry') && errorMsg.includes('phone')) {
          errorMsg = '该手机号已注册';
        }
      }
    }
    alert(errorMsg);
  } finally {
    loading.value = false; // 关闭加载状态
  }
};

// 跳转到登录页
const toLogin = () => {
  router.push('/Login');
};
</script>

<style>
.yemian {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  /* 柔和背景色 */
}

.bigbox {
  width: 450px;
  padding: 30px 40px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 轻微阴影 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 28px;
  color: #d15024;
  margin-bottom: 30px;
  font-weight: 600;
}

.content {
  width: 100%;
  height: 50px;
  margin-top: 15px;
  display: flex;
  align-items: center;
}

.imge {
  margin-left: 0;
  /* 去除左侧冗余间距 */
  width: 50px;
  height: 50px;
  background-color: #f0f0f0;
  border-radius: 4px 0 0 4px;
  /* 左圆角 */
}

.input {
  height: 50px;
  flex: 1;
  /* 自适应剩余宽度 */
  padding: 0 15px;
  border: none;
  outline: none;
  background-color: #f0f0f0;
  border-radius: 0 4px 4px 0;
  /* 右圆角 */
  font-size: 14px;
}

.input:focus {
  background-color: #e8e8e8;
  /* 聚焦时加深背景色 */
}

.error-text {
  width: 100%;
  height: 20px;
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #ff4d4f;
  /* 错误提示红色 */
  text-align: left;
}

.login-btn {
  font-size: 16px;
  height: 48px;
  width: 100%;
  background-color: #ff6200;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s;
}

.login-btn:hover:not(:disabled) {
  background-color: #e55a00;
  /*  hover效果 */
}

.login-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.to-login {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.link {
  color: #ff6200;
  cursor: pointer;
  text-decoration: underline;
}
</style>